<template>
  <div>
    <p>{{count}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  //setUp 是组合api 的入口函数
  setup() {
    // let cout = 0
    // 定义可一个 名称叫做count变量，这个变量的初始值是0
    // 这个变量发生改变之后，Vue会自动更新UI
    let count = ref(0);
    //注意点：
    // 在组合api中定义的变量、方法，要想在外界使用，必须通过return {xxx,xxx}暴露出去

    //
    function myFn() {
      console.log(count);
      count.value += 1;
    }
    return {
      count,
      myFn
    };
  }
};
</script>
